<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Page Loading</title>
    <style>
        .page-loading {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background: #fff none repeat scroll 0 0;
        }

        .spinner {
            height: 100px;
            left: 50%;
            margin: -50px 0 0 -80px;
            position: absolute;
            text-align: center;
            top: 50%;
            width: 160px;
        }

        .spinner aside {
            font-size: 16px;
            font-style: normal;
            font-family: "华文行楷", serif;
            color: #999;
        }

        @keyframes scaleDelay {
            0%, 40%, 100% {
                transform: scaleY(0.6);
                background-color: #2f6fad;
            }
            20% {
                transform: scaleY(1);
                background-color: #37aae9;
            }
        }

        .spinner > div {
            animation: 1.2s ease-in-out 0s normal none infinite running scaleDelay;
            background-color: #37aae9;
            display: inline-block;
            height: 100%;
            margin: 2px;
            width: 15px;
        }

        .spinner > div:nth-child(2) {
            animation-delay: -1.1s;
        }

        .spinner > div:nth-child(3) {
            animation-delay: -1s;
        }

        .spinner > div:nth-child(4) {
            animation-delay: -0.9s;
        }

        .spinner > div:nth-child(5) {
            animation-delay: -0.8s;
        }

        .spinner > div:nth-child(6) {
            animation-delay: -0.7s;
        }
    </style>
</head>
<body>
<div class="page-loading">
    <div class="spinner">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <aside>页面加载中...</aside>
    </div>
</div>
</body>
</html>